<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>取消课程</title>

		<style>
			.content ul{
				padding: 20px 15px;
			}
			/* 换时间 */
			.title{
				font-size: 18px;
				font-weight: 600;
				font-family: "Hiragino Sans GB W6";
				overflow: hidden;
			}
			.title .left{
				float: left;
			}
			.title .right{
				float: right;
			}
			.title .s-icon{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-repeat: no-repeat;
				background-image: url(../images/icons/unselect-gesture.png); 
				background-size: 100% 100%;
			}
			.replace.select .s-icon{
				background-image: url(../images/icons/select-gesture.png);
			}
			.sub-title{
				margin-top: 5px;
				font-size: 13px;
				color: #b4b4b4;
			}
			.sub-title span{
				margin-right: 20px;
			}
			/* 退课 */
			ul.quit-sub{
				padding: 10px 0;
			}
			.reason-select{
				padding: 0 8px;
				border: 1px solid #dcdcdc;
				background-color: #fff;
				overflow: hidden;
			}
			.reason-select .r-s-l{
				float: left;
				padding: 10px 0;
				font-size: 13px;
				color: #b4b4b4;
			}
			.reason-select .r-s-r{
				float: right;
				padding: 10px 0;
				padding-left: 13px;
				padding-right: 5px;
				border-left: 1px solid #dcdcdc;

			}
			.reason-select .arrow{
				display: inline-block;
				width: 12px;
				height: 10px;
				background-image: url(../images/icons/arrow_down_black.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.reason-select.select .arrow{
				background-image: url(../images/icons/arrow_up_black.png);
			}
			/** 退课具体原因 **/
			ul.reasons{
				padding: 0;
				border-left: 1px solid #dcdcdc;
				border-right: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				background-color: #fff;
			}
			.reasons .reason-item{
				padding: 10px 5px;
				border-bottom: 1px solid #dcdcdc;
			}
			.reasons .reason-item:last-child{
				border-bottom: none;
			}
			.reasons .other-quit-reason{
				color: #53ceca;
			}
			/** 退课其他原因 **/
			div.other-reasons{
				margin-top: 15px;
				width: 100%;
				height: 100px;
			}
			.other-reasons textarea{
				display: block;
				height: 100px;
				width: 96%;
				padding: 5px 2%;
				border: none;
				outline: none;
				resize: none;
				font-size: 13px;
			}
			/* 退课按钮 */
			button.quit-btn{
				/*position: fixed;
				bottom: 15px;
				left: 2.5%;
				right: 2.5%;*/
				display: block;
				height: 35px;
				width: 95%;
				margin: 0 auto;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				background-color: #53ceca;
				font-size: 16px;
				font-weight: 600;
				color: #fff;
			}

			/* rechange */
			ul.quit{
				/*padding-top: 0;*/
			}
			ul.quit-sub{
				padding-bottom: 0;
				padding-top: 0;
			}
			.quit-reason{
				padding: 0 15px;
				margin-bottom: 60px;
			}
			.quit-sub-wraper{
				padding: 0 15px;
				margin-top: 10px;
			}

		</style>
	</head>
	<body>
		<div class="content">
			<form action="">
			<!-- 换时间 -->
			<ul class="change">
				<li class="replace select">
					<div class="title">
						<span class="left">我要换时间</span>
						<span class="right s-icon"></span>
					</div>
					<p class="sub-title">临时有事来不了？试试换一个时间吧！</p>
				</li>
			</ul>
			<!-- 退课 -->
			<ul class="quit">
				<li class="drop-course">
					<div class="title">
						<span class="left">我要退课</span>
						<span class="right s-icon"></span>
					</div>
					<p class="sub-title">
						<span>免费取消</span>
						<span>退课金额：¥200</span>
					</p>
				</li>
			</ul>
			<!-- 退课原因 -->
			<div class="quit-sub-wraper">
				<ul class="quit-sub">
					<li class="reason-select select">
						<span class="r-s-l select">选择退课原因</span>
						<span class="r-s-r">
							<span class="arrow"></span>
						</span>
					</li>
				</ul>
			</div>
			<!-- 退课具体原因 -->
				<div class="quit-reason">
					<ul class="reasons" style="display: none;">
						<li class="reason-item">我没时间了</li>
						<li class="reason-item">我换老师了</li>
						<li class="reason-item">我的课程被取消了</li>
						<li class="reason-item">我的团课换老师了</li>
						<li class="reason-item other-quit-reason select">其它</li>
					</ul>
					<!-- 退课其他原因 -->
					<div class="other-reasons" style="display: block;">
						<textarea id="otherReason"  placeholder="补充一下退课原因吧!"></textarea>
					</div>
				</div>
			<!-- 退课button -->
			<button id="quitBtn" class="quit-btn" type="submit">残忍退课</button>
			</form>
		</div>
	</body>
</html>